/**
 * 时间：2024-08-25
 * 作者：waygc
 * 描述：列表页主文件，提供列表功能、查询功能、删除功能
 *			 并且可以通过点击按钮，前往编辑页进行编辑、前往详情页查看数据详情
 * 
 */
import React from "react";
import { Input, Table, Button, Row, Col, Select, Pagination, Popconfirm, Modal, Tooltip, message } from"antd";
import { FormOutlined, DeleteOutlined, SearchOutlined,FileAddOutlined } from '@ant-design/icons'
import { formOutlinedStyle, deleteOutlinedStyle, evtBtnStyle, contentBorderStyle,
		marginRight10Style } from "./../../lib/custom-styles";
import { Link } from "react-router-dom";
import { PUBLISH_TYPE_ENUM_MAP, FILE_TYPE_ENUM_MAP, TARGET_TYPE_ENUM_LIST,
		TARGET_TYPE_ENUM_MAP, CLASS_TYPE_ENUM_LIST, CLASS_TYPE_ENUM_MAP } from "./../../lib/enums";

import DataEdit from "./edit";
import DataDetail from "./detail";
import dataApi from "./data";

import "./index.css";

const { Option } = Select;

class DataTable extends React.Component {
	constructor (props) {
		super(props);
		this.getDatas();
		this.editRef = React.createRef();
	}

	state = {
		showId: "",
		dataSource: [],
		loading: true,
		editModalVisible: false,
		detailModalVisible: false,
		editModalTitle: "",
		detailModalTitle: ""
	};

	columns = [
		{
			title: '教程名称',
			dataIndex: 'name',
			key: 'name',
			render: (text, record) => <Link to={`/list/detail/${record.key}`}>{text}</Link>
		},
		{
			title: '发布类型',
			dataIndex: 'publish',
			key: 'publish',
			render: (text) => <span>{PUBLISH_TYPE_ENUM_MAP[text] || '-'}</span>,
		},
		{
			title: '课件类型',
			dataIndex: 'fileType',
			key: 'fileType',
			align: "center",
			width: 150,
			render: (text) => <span>{FILE_TYPE_ENUM_MAP[text] || '-'}</span>,
		},
		{
			title: '学习对象',
			dataIndex: 'target',
			key: 'target',
			render: (text) => <span>{TARGET_TYPE_ENUM_MAP[text] || '-'}</span>,
		},
		{
			title: '学习人数',
			dataIndex: 'count',
			key: 'count',
			width: 100,
			align: "center"
		},
		{
			title: '创建时间',
			dataIndex: 'createTime',
			key: 'createTime',
		},
		{
			title: '教程类型',
			dataIndex: 'classType',
			key: 'classType',
			render: (text) => <span>{CLASS_TYPE_ENUM_MAP[text] || '-'}</span>,
		},
		{
			title: '操作',
			dataIndex: 'event',
			key: 'event',
			width: 100,
			align: "center",
			render: (text, record) => <div>
				<Tooltip placement="top" title="编辑" >
					<Button type="text" icon={<FormOutlined />} style={formOutlinedStyle} onClick={() => this.handleEditRow(record.key)} />
				</Tooltip>
				<Popconfirm title={`您确定要删除当前的数据(${record.name})么？`} onConfirm={() => this.handleDelRow(record.key)} cancelText="放弃删除" okText="确定删除">
					<Tooltip placement="top" title="删除" >
						<Button type="text" icon={<DeleteOutlined />} style={deleteOutlinedStyle} />
					</Tooltip>
				</Popconfirm>
			</div>,
		},
	];

	searchStyle = {
		width: 200
	};

	searchObj = {};

	pageData = {
		page: 1,
		size: 10,
		total: 0
	};

	getDatas = async () => {
		try {
			this.setState({ loading: true });
			const searchObj = Object.assign({}, this.searchObj, this.pageData);
			const res = await dataApi.getList(searchObj);
			this.dataSource = res.data;
			this.pageData = res.paging; // 这里直接把 searchObj 覆盖掉，避免出现前后值相互产生影响的问题
			this.setState({ dataSource: this.dataSource });
		} finally {
			this.setState({ loading: false});
		}
	}

	// 监听搜索栏的教程名称
	handleChangeName = (value) => {
		if (value && value.target) {
			this.searchObj.name = value.target.value;
		} else {
			this.searchObj.name = undefined;
		}
		this.pageData.page = 1;
		this.getDatas();
	}

	// 监听搜索栏的学习对象
	handleChangetgtType = (value) => {
		if (value) {
			this.searchObj.tgtType = Number(value);
		} else {
			this.searchObj.tgtType = undefined;
		}
		this.pageData.page = 1;
		this.getDatas();
	}

	// 监听搜索栏的教程类型
	handleChangeClsType = (value) => {
		if (value) {
			this.searchObj.classType = Number(value);
		} else {
			this.searchObj.classType = undefined;
		}
		this.pageData.page = 1;
		this.getDatas();
	}

	// 监听分页变化
	handleChangePage = (evt) => {
		this.pageData.page = evt;
		this.getDatas();
	}

	// 监听点击编辑按钮
	handleEditRow = (rowId) => {
		this.setState({
			rowId,
			editModalVisible: true,
			editModalTitle: "编辑数据"
		});
	}

	// 监听 点击删除按钮
	handleDelRow = async (id) => {
		try {
			this.setState({ loading: true });
			await dataApi.del(id);
			await this.getDatas();
		} finally {
			this.setState({ loading: false });
		}
	}
	// 监听点击新增按钮
	handleAddData = () => {
		this.setState({
			rowId: "",
			editModalVisible: true,
			editModalTitle: "添加新数据"
		});
	}

	// 监听编辑窗口点击“保存”按钮
	handleEditModalOk = async () => {
		try {
			await this.editRef.current.handleSubmit();
			message.success("数据保存成功");
			await this.getDatas();
			this.setState({
				editModalVisible: false
			});
		} catch (err) {
			if (err.valid) {
				message.warning("请先完成表单校验");
			} else {
				message.warning("数据保存失败");
			}
		}
	}

	// 监听编辑窗口点击“取消”按钮
	handleEditModalCancel = () => {
		this.setState({
			editModalVisible: false
		});
	}

	// 监听点击教程名称数据，打开详细窗口页
	handleOpenDetail = (row) => {
		this.setState({
			rowId: row.key,
			detailModalTitle: row.name,
			detailModalVisible: true
		});
	}

	// 监听详细窗口的关闭事件
	handleDetailModaClose = () => {
		this.setState({
			detailModalVisible: false
		});
	}

	render () {
		return (
			<div>
				<div style={contentBorderStyle}>
					<Row>
						<Col span={6}>
							<span>教程名称：</span>
							<Input style={this.searchStyle} allowClear onChange={this.handleChangeName} />
						</Col>
						<Col span={6}>
							<span>学习对象：</span>
							<Select onChange={this.handleChangetgtType} style={this.searchStyle} allowClear>
								{ TARGET_TYPE_ENUM_LIST.map(obj => (
									<Option key={obj.value}>{obj.label}</Option>
								)) }
							</Select>
						</Col>
						<Col span={6}>
							<span>教程类型：</span>
							<Select onChange={this.handleChangeClsType} style={this.searchStyle} allowClear>
								{ CLASS_TYPE_ENUM_LIST.map(obj => (
									<Option key={obj.value}>{obj.label}</Option>
								)) }
							</Select>
						</Col>
						<Col span={6} style={evtBtnStyle}>
							<Button icon={<SearchOutlined />} type="primary" style={marginRight10Style} onClick={this.getDatas}>查询</Button>
							<Button icon={<FileAddOutlined />} onClick={this.handleAddData}>新增</Button>
						</Col>
					</Row>
				</div>
				<div style={contentBorderStyle}>
					<Table {...this.state} columns={this.columns} dataSource={this.dataSource} pagination={false} />
					<div class="paging-box">
						<Pagination current={this.pageData.page} pageSize={this.pageData.size} total={this.pageData.total}
							onChange={this.handleChangePage}
						/>
					</div>
				</div>
				<Modal
					title={this.state.editModalTitle}
					open={this.state.editModalVisible}
					okText="保存"
					cancelText="取消"
					onOk={this.handleEditModalOk}
					onCancel={this.handleEditModalCancel}
					destroyOnClose
					width={1000}
				>
					<DataEdit ref={this.editRef} rowId={this.state.rowId} />
				</Modal>
				<Modal
					title={this.state.detailModalTitle}
					open={this.state.detailModalVisible}
					onOk={this.handleDetailModaClose}
					onCancel={this.handleDetailModaClose}
					destroyOnClose
					width={1200}
					footer=""
				>
					<DataDetail rowId={this.state.rowId} />
				</Modal>
			</div>
		);
	}
}

export default DataTable
